<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul,
        ol {
            margin: 0;
        }
        .input-num {
            height: 100px;
            width: 400px;
            position: relative;
        }
        .input-num input {
            height: 100%;
            width: 350px;
            box-sizing: border-box;
            font-size: 40px;
        }
        .input-num .add,
        .input-num .reduce {
            position: absolute;
            right: 0;
            height: 50px;
            width: 50px;
            border: none;
            display: block;
            box-sizing: border-box;
        }

        .input-num .add:active,
        .input-num .reduce:active {
            background: #aaa;
        }

        .input-num .add {
            border-bottom: 1px solid #666;
            top: 0;
        }

        .input-num .reduce {
            bottom: 0;
        }

    </style>
</head>
<body>
    <div class="input-num">
        <input type="text">
        <button class="add">+</button>
        <button class="reduce">-</button>
    </div>

    <script src="../../../demo/jq/jq.js"></script>
    <script>
        const max = 3;
        const min = 0;
        function onAdd () {
            $('.reduce').attr('disabled', false);
            const inp = $('.input-num input');
            const value = inp.val();
            if (isNaN(Number(value))) {
                alert('输入的不是数字，请重新输入');
            }
            const newValue = Number(value) + 1;
            if (newValue > max) {
                $(this).attr('disabled', true);
                return;
            }
            inp.val(newValue);
        }
        function onReduce () {
            $('.add').attr('disabled', false);
            const inp = $('.input-num input');
            const value = inp.val();
            if (isNaN(Number(value))) {
                alert('输入的不是数字，请重新输入');
            }
            const newValue = Number(value) - 1;
            if (newValue < min) {
                $(this).attr('disabled', true);
                return;
            }
            inp.val(newValue);
        }
        function onBlur () {
            const inp = $('.input-num input');
            const value = inp.val();
            if (isNaN(Number(value))) {
                inp.val(0);
            }
        }
        $('.add').on('click', onAdd);
        $('.reduce').on('click', onReduce);
        $('.input-num input').on('blur', onBlur);

        // // 首字母
        // const str = 'hello world';
        // console.log(str[0]);

        // // 判断一个字符串是否以hello开头
        // console.log(str.indexOf('hello') === 0);
        // console.log(str.startsWith('hello'));

        // 取字符串中第一份数字
        const str = 'a123';
        console.log(parseInt(str));

    </script>
</body>
</html>